<template>
	<a-drawer title="特效" :width="430" :visible="visible" :footer-style="{ textAlign: 'right' }" @close="onClose">
		<div class="title">
			当前选中效果：{{currentKey?matchData.effects[currentKey]:'暂无'}}
			<a-button v-if="currentKey" @click="currentKey = ''" type='link'>清除</a-button>
		</div>
		<div class="transition_con">
			<div class="transition_item" v-for="(item, index) in transitionList" :key="index">
				<div class="transition_name">{{item.name}}</div>

				<div class="material_con">
					<div class="material_item"
						@click.stop="chooseThis(material_item)"
						v-for="(material_item, material_index) in item.materials" :key="material_index">
						<div class="material_image"
							:class="currentKey == material_item.scene_type?'active':''">
							<video @mouseout="(value)=>handleMouseOut(value)"
								@mouseenter="(value)=>handleMouseIn(value)" 
								:src="material_item.material_url" alt="" />
						</div>
						<div class="material_name">{{material_item.material_name}}{{material_item.show}}</div>
					</div>
				</div>
			</div>
		</div>
		<template #footer>
			<a-space>
				<a-button @click="onClose">取消</a-button>
				<a-button type="primary" @click="handleSubmit">提交</a-button>
			</a-space>
		</template>
	</a-drawer>
</template>

<script>
	import request from "../../../../../../common/utils/request";
	import matchData from '../js/match_data.js';
	import {
		defineComponent,
		reactive,
		ref,
		toRefs,
		watch,
		nextTick
	} from 'vue';
	import {
		message
	} from 'ant-design-vue';
	let videoPlayer = null
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			specialKey: {
				type: String,
				default: ''
			}
		},

		emits: ['close'],

		setup(props, context) {
			const state = reactive({
				currentKey: '',
				transitionList: []
			})

			const onClose = () => {
				context.emit('close', 'close')
			};

			const handleSubmit = () => {
				context.emit('close', state.currentKey)
			}

			const getTransitionList = () => {
				request.get('/work_ai', '/user/shotstack/material/effects/list').then(res => {
					state.transitionList = res.result
				})
			}

			const chooseThis = (item) => {
				if (state.currentKey == item.scene_type) return
				state.currentKey = item.scene_type
			}
			
			const handleMouseOut = (e) => {
				e.target.currentTime = 0
				e.target.pause()
			}

			const handleMouseIn = (value) => {
				value.target.currentTime = 0
				value.target.play()
			}
			
			watch(() => props.visible, val => {
				if (val) {
					getTransitionList()
				}
				if (val && props.specialKey) {
					state.currentKey = props.specialKey
				}
			})

			return {
				...toRefs(state),
				onClose,
				chooseThis,
				handleSubmit,
				handleMouseIn,
				matchData,
				handleMouseOut
			};
		},
	});
</script>

<style lang="less" scoped>
	.title{
		height: 30px;
		display: flex;
		align-items: center;
		color: #333;
		font-weight: bold;
		font-size: 14px;
	}
	.transition_con {
		width: 100%;

		.transition_item {
			margin-top: 10px;

			.transition_name {
				color: #333;
				font-weight: bold;
				font-size: 14px;
			}

			.material_con {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 10px;

				.material_item {
					margin-top: 5px;
					cursor: pointer;
					width: 32%;
					.material_image {
						width: 100%;
						height: 70px;
						border-radius: 5px;
						border: 2px solid transparent;
						
						&.active {
							border: 2px solid #40dde7;
						}

						video {
							width: 100%;
							height: 100%;
							border-radius: 5px;
							overflow: hidden;
							filter: grayscale(.1)
						}
					}

					.material_name {
						color: #666;
						margin-top: 5px;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>